import React, {Component} from 'react';
import {
    StyleSheet,
    ScrollView,
    Image
} from 'react-native';
import {Toast, ListRow} from 'teaset'
import {View} from 'react-native-ui-lib'
import {MapView} from 'react-native-baidumap-sdk'

import colors from "../common/colors";
import Global from '../common/global'
import Util from '../common/util'
import Api from '../common/api'
import AutoJianCe from "./AutoJianCe";

const points = [
    {latitude: 39.996891, longitude: 119.794664, source : require('../images/pin_1.png')},
    {latitude: 39.967258, longitude: 119.758445, source : require('../images/pin_2.png')},
    {latitude: 39.952657, longitude: 119.692329, source : require('../images/pin_3.png')},
    {latitude: 39.937611, longitude: 119.62219, source : require('../images/pin_4.png')},
    {latitude: 39.919906, longitude: 119.568722, source : require('../images/pin_5.png')},
    {latitude: 39.892785, longitude: 119.522154, source : require('../images/pin_6.png')},
    {latitude: 39.84516, longitude: 119.492546, source : require('../images/pin_7.png')},
    {latitude: 39.819007, longitude: 119.458051, source : require('../images/pin_8.png')}
]

export default class HuanJingJianCe extends Component {

    static navigationOptions = ({navigation, screenProps}) => ({
        headerTintColor: colors.headerText,
        headerTitle: '海洋环境监测',
        headerStyle: {
            backgroundColor: colors.headerBg,
            borderBottomColor: colors.headerBottom,
            paddingTop: Global.paddingTop,
            height: Global.navigationHeaderHeight
        },
        headerTitleStyle: {
            alignSelf: 'center',
        },
        headerRight: <View/>,
        headerBackTitle: null
    })

    constructor(props) {
        super(props);

        this.state = {
            isLoading: false
        };
    }

    pressAntan = () => {
        this.props.navigation.navigate('QinShiList')
    }

    pressJiance = () => {
        this.props.navigation.navigate('AutoJianCe', {
            points
        })
    }

    renderMap = () => {
        return (
            <View padding-13 paddingT-0 bg-white>
                <MapView
                    style={{height: (Global.width - 30) * 160 / 345, width: Global.width - 30}}
                    zoomLevel={11}
                    center={{ latitude: 39.930751, longitude: 119.612991 }}
                >
                    {
                        points.map((v,i) => (
                            <MapView.Marker
                                key={`point${i}`}
                                view={() => (
                                    <Image source={v.source} style={styles.tintImg}/>
                                )}
                                coordinate={{latitude: parseFloat(v.latitude), longitude: parseFloat(v.longitude)}}
                            />
                        ))
                    }

                </MapView>
            </View>
        )
    }

    render() {
        return (
            <View style={styles.container}>
                <ListRow
                    title={"岸滩侵蚀"}
                    titleStyle={styles.titleStyle}
                    onPress={() => this.pressAntan()}
                    bottomSeparator={"none"}
                />
                <ListRow
                    title={"自动监测"}
                    style={{marginTop: 5}}
                    titleStyle={styles.titleStyle}
                    onPress={() => this.pressJiance()}
                    bottomSeparator={"none"}
                />
                {this.renderMap()}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: colors.bgColor,
    },
    titleStyle: {
        fontSize: 15,
        color: '#333333'
    },
    tintImg: {
        width: 22,
        height: 15
    }
});
